<template>
    <div v-loading="isLoading" class="cate-container">
      <h2>文章分类</h2>
<Navigation @select="handleSelect" :list="list"/>
    </div>
</template>

<script>
import Navigation from '../Navigation'
import { getBlogType } from '../../../../api'
export default {
  name: 'index',
  components: {
    Navigation
  },
  async created () {
    this.isLoading = false
    this.record = await getBlogType()
    this.isLoading = true
    const totalArticleCount = this.record.reduce((a, b) => a + b.articleCount, 0)
    const result = [{ name: '全部', id: -1, articleCount: totalArticleCount }, ...this.record]
    this.list = result.map(item => ({
      ...item,
      isSelect: item.id === this.categoryId,
      aside: `${item.articleCount}篇`
    }))
  },
  data () {
    return {
      record: [],
      list: [],
      isLoading: false
    }
  },
  computed: {
    categoryId () {
      return +this.$route.params.categoryId || -1
    },
    limit () {
      return +this.$route.params.limit || 10
    }
  },
  methods: {
    handleSelect (item) {
      // 翻页
      const query = {
        page: 1,
        limit: this.limit
      }
      if (item.id === -1) {
        this.$router.push({
          path: '/Home/Blog',
          query
        })
        return
      }
      this.$router.push({
        name: '/Home/cate',
        query,
        params: {
          categoryId: item.id
        }
      })
    }
  }
}
</script>

<style lang="less" scoped>
.cate-container{
  width: 300px;
  box-sizing: border-box;
  padding: 20px;
  height: 100%;
  position: relative;
  overflow-y: auto;
  scroll-behavior: smooth;
  /*去掉滚动条*/
  &::-webkit-scrollbar {
    display: none; /* Chrome Safari */
  }
  &{
    scrollbar-width: none; /* firefox */
    -ms-overflow-style: none; /* IE 10+ */
    overflow-x: hidden;
    overflow-y: auto;
  }
  h2{
    margin: 0;
    font-weight: bold;
    font-size: 1em;
    letter-spacing: 2px;
  }
}
</style>
